<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/new_file.css" />
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			
		
			
			
					
		<div class="mui-scroll">
				<!--头部（头部背景+发布栏）-->
			<div class="wrapper">
				<div class="mui-card head">
					<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/head.gif)">
						
					</div>
					<div class="mui-card-content">
						<div class="mui-input-row shuru" style="background-color: #ffebeb;">
								<font>TO:</font>
								<input id="toname" type="text" placeholder="who" style="width: 13%;border-right:solid #f49fbc;">
								<input id="forwhat" type="text" placeholder="我想对你说..." style="width: 60%; ">
								
								<button type="button" id="myfabu" class="mui-btn">
									<font><b>发布</b></font>
								</button>
								
					    </div>
					    <div class="mui-input-row shuru shuru2" style="background-color: #ffebeb; float: right;">
								<font>FROM:</font>
								<input id="me" type="text" placeholder="name" style="width: 30%;">	
								<div class="mui-input-row mui-checkbox mui-left" style="float: right;background-color: #ffebeb;">
									
									
								</div>
					    </div>
					</div>
					
				</div>
			<div class="v">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					
				</ul>
			</div>
					<!--footer-->
			<div class="foot">
				<img src="../images/foot.gif" style="height: 25vw;background-color: #FFFFFF;" />
			</div>

			</div>  
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					/*down: {
						callback: pulldownRefresh
					},*/
					up: {
						contentrefresh: '雨无声...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			/*function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-collapse';
						li.innerHTML = '<div class="mui-card-content-inner">'+
						    '这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等'+    
					       '</div>';
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}*/
			var count = 0;
			j=0;
			var request=new XMLHttpRequest();
							request.open("POST","http://127.0.0.1/clw/web/car/search");
							var data="id=0";
							//经测试只有选择application/x-www-form-urlencoded才成功。
							request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
							request.send(data);
							
							request.onreadystatechange = function() {
							if (request.readyState===4) {
								if (request.status===200) { 
							                 obj= JSON.parse(request.responseText);
								 			 totalCount=obj.items.length;//数据总数
								 			 x=totalCount;
										     pageSize = 15; // 每页显示几条记录
										     pageTotal=Math.ceil(totalCount / pageSize);
										  }
								}
							}
			
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {      
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pageTotal)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					//var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = 0; i < pageSize; i++) {
						var li = document.createElement('li');
						//li.className = 'mui-table-view-cell';
						li.innerHTML = '<div class="con">'+
					'<img class="conimg" src="../images/girl.gif"/>'+
					'<div class="mui-card">'+
						'<div class="mui-card-header">'+'#'+x+'TO:'+obj.items[j].tosb+'</div>'+
						'<div class="mui-card-content">'+
							'<div class="mui-card-content-inner">'+
								obj.items[j].content+
							'</div>'+
						'</div>'+
						'<div class="mui-card-footer">'+'<font>'+'FROM:'+obj.items[j].name+'</font>'+'</div>'+
						
							'<ul class="mui-table-view">'+
								'<li class="mui-table-view-cell mui-collapse">'+
									'<a id="'+obj.items[j].id+'" href="#" style="padding-right: 10px;" >'+'<img src="../images/dz.gif" style="float: right;width: 32px;height: 20px;"/>'+'<img src="../images/pl.gif" style="float: right;width: 32px;height: 20px;"/>'+'</a>'+    
									'<div class="mui-collapse-content" style="margin-left:2px;">'+
										'<form class="mui-input-group" >'+
											'<div class="mui-input-row">'+
												'<input type="text" id="comment-'+obj.items[j].id+'"  class="mui-input-clear" placeholder="输入评论">'+
											'</div>'+
											'<div class="mui-input-row">'+
												'<input type="text" id="myname-'+obj.items[j].id+'"  class="mui-input-clear" placeholder="MY NAME"  >'+
											'</div>'+
											'<div class="mui-button-row">'+
												'<button id="'+obj.items[j].id+'" class="mui-btn mui-btn-primary" type="button" onclick="return false;">'+'确认'+'</button>'+'&nbsp;&nbsp;'+
												'<button id="'+obj.items[j].id+'" class="mui-btn mui-btn-primary" type="button" onclick="return false;">'+'取消'+'</button>'+
											'</div>'+
											
											
											
											
											'<div class="mui-card">'+
										
												'<div class="mui-card-content">'+
													'<ul class="mui-table-viewooo-'+obj.items[j].id+'" >'+
					
											'</ul>'+
												'</div>'+
											'</div>'+
											
										'</form>'+
									'</div>'+
								'</li>'+
							'</ul>'+
						
					'</div>'+
				'</div>';
						table.appendChild(li);
						j++;
						x--;
					}
								                          
								
							                            
							                                        
							
					
					//
				}, 500);
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 300);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			
		</script>
		<script>
			document.getElementById('myfabu').addEventListener('tap', function() {
				var to=document.getElementById('toname');
				var what=document.getElementById('forwhat');
				var me=document.getElementById('me');
				
				var request=new XMLHttpRequest();
							request.open("POST","http://127.0.0.1/clw/web/car/create");
							var data="name="+me.value+"&tosb="+to.value+"&content="+what.value;
							//经测试只有选择application/x-www-form-urlencoded才成功。
							request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
							request.send(data);
							
							
				
				//alert(to.value);
				 location.reload();
				alert("成功发布!"); 
			});	
			//监听评论展开按钮
			mui(".mui-table-view").on('tap','a',function(){
                 var id = this.getAttribute('id');
				 //alert(id);
				 show(id);
			});
			
		//监听评论提交按钮	
			mui(".mui-table-view").on('tap','.mui-btn',function(){
                 var id = this.getAttribute('id');
                 var comment=document.getElementById('comment-'+id);
                 var myname=document.getElementById('myname-'+id);
                 var request=new XMLHttpRequest();
							request.open("POST","http://127.0.0.1/clw/web/car/creater");
							var data="byname="+myname.value+"&content="+comment.value+"&cid="+id;
							//经测试只有选择application/x-www-form-urlencoded才成功。
							request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
							request.send(data);
                 
				 alert("评论成功！");
				 show(id);
			});
			
			
		
			
			
			
			
			
			
			
			function show(id){
				//alert("666"+id);
				            var request=new XMLHttpRequest();
							request.open("POST","http://127.0.0.1/clw/web/car/searcher");
							var data="cid="+id;
							//经测试只有选择application/x-www-form-urlencoded才成功。
							request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
							request.send(data);
						
							request.onreadystatechange = function() {
							if (request.readyState===4) {
								if (request.status===200) { 
							                 var obj1= JSON.parse(request.responseText);
								 			 var totalCount1=obj1.items.length;//数据总数
								 			 var j1=0;
							
					       
					        var cells = document.body.querySelectorAll('.mui-table-view-hooley-'+id);
					        if(totalCount1==0){
					        	
					        }
					        else{
					        	if(cells.length==totalCount1){
					        		//alert("666"+id);
					        	}
					        	else{
					        	var table = document.body.querySelector('.mui-table-viewooo-'+id);	
					        	    
					        	   
									 while(table.hasChildNodes()) //当div下还存在子节点时 循环继续
								    {
								        table.removeChild(table.firstChild);
								    }
					        	    
					        	//table.removeChild(table.childNodes);
					           for (var i = 0; i < totalCount1; i++) {
						       var li = document.createElement('li');
						li.className = 'mui-table-view-hooley-'+id;
						li.innerHTML = '<div class="mui-card">'+
						'<div class="mui-card-content">'+
					'<div class="mui-card-content-inner">'+
						'<p>'+obj1.items[j1].content+'</p>'+
					    '<p>'+'------'+obj1.items[j1].byname+'</p>'+
					'</div>'+
					'</div>'+
				'</div>';
						table.appendChild(li);
						j1++;
					           }
					               }
					            }
					           
										  }
								}
							}
			}
			
		</script>
	</body>

</html>